<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-top:1px solid #1b926c;
        }
         footer{
             color:#fff;
             background-color: #222;
             border-color: #080808;
             padding-top:60px;
             margin-top:100px;
         }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="../index.html">首页</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="javascript:void(0)">Link</a></li>
            <li><a href="javascript:void(0)">Link2</a></li>
        </ul>
    </div>
</nav>
 <div class="container" ng-app="MyAPP">
     <h3>Demo1: 指令修改控制器中属性值示例</h3>
     <div ng-app="plunker" ng-controller="MainCtrl">
       Scope中的值为 <input type="checkbox" ng-model="name">
        <my-directive my-directive-var="name"></my-directive>

     </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var app = angular.module('MyAPP', []);

    app.controller('MainCtrl', function ($scope) {
        $scope.name = true;
    });

    app.directive('myDirective', function ($compile) {
        return {
            restrict: 'AE', //指令作为元素或者DOM属性
            scope: {
                myDirectiveVar: '=',
                //bindAttr: '='
            },
            template: '<button>点我修改控制器中的值</button>',
            replace: true,
            //require: 'ngModel',
            link: function ($scope, elem, attr, ctrl) {

                elem.bind('click', function () {
                    $scope.$apply(function () {
                        $scope.myDirectiveVar = !$scope.myDirectiveVar;
                    });
                });

                console.debug($scope);
                //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
                // $compile(textField)($scope.$parent);
            }
        };
    });

</script>